<template>
    <BaseTable ref="table" :data="list" :columns="columns" row-key="id" highlight-current-row height="calc(100% - 73px)">
        <template #number="{ scope: { row } }">
            <span class="cursor-pointer text-blue-light" @click="handleClickNumber(row)">{{ row.number }}</span>
        </template>
        <template #direction="{ scope: { row } }">
            <span>{{ Directions[row.direction] }}</span>
        </template>
        <template #type="{ scope: { row } }">
            <span>{{ EventTypes[row.type] }}</span>
        </template>
        <template #level="{ scope: { row } }">
            <span>{{ EventLevel[row.level] }}</span>
        </template>
        <template #fire="{ scope: { row } }">
            <span>{{ IsFire[row.fire] }}</span>
        </template>
        <template #explosion="{ scope: { row } }">
            <span>{{ IsExplode[row.explosion] }}</span>
        </template>
        <template #pollutant="{ scope: { row } }">
            <span>{{ IsContaminantDAO[row.pollutant] }}</span>
        </template>
        <template #fallOut="{ scope: { row } }">
            <span>{{ IsScattered[row.fallOut] }}</span>
        </template>
        <template #roadCompensation="{ scope: { row } }">
            <span>{{ IsIndemnify[row.roadCompensation] }}</span>
        </template>
        <template #action="{ scope: { row } }">
            <BaseButton v-permission="{ btnCode: 'dlyh_c11_d37_2' }" type="text" @click="handleEdit(row)">编辑</BaseButton>
            <BaseButton v-permission="{ btnCode: 'dlyh_c11_d38_2' }" type="text" color="danger" @click="handleDelete(row.id)">删除</BaseButton>
        </template>
    </BaseTable>
</template>
<script>
import { EventTypes, EventLevel, IsFire, IsExplode, IsContaminantDAO, IsScattered, IsIndemnify } from '@/views/maintenance-decision/constants'
import { Directions } from '@/config/constants'
import { mapGetters } from 'vuex'
export default {
    props: {
        list: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        ...mapGetters(['idUser'])
    },
    activated() {
        this.$refs.table.$refs.table.doLayout()
    },
    setup(props) {
        const columns = [
            {
                slot: 'number',
                attrs: {
                    label: '事件编号',
                    fixed: true,
                    'show-overflow-tooltip': true,
                    'min-width': 170
                }
            },
            {
                attrs: {
                    label: '事发时间',
                    prop: 'trafficTime',
                    'show-overflow-tooltip': true,
                    width: 160
                }
            },
            {
                slot: 'type',
                attrs: {
                    label: '事件类型',
                    'show-overflow-tooltip': true,
                    'min-width': 100
                }
            },
            {
                attrs: {
                    label: '所属公路',
                    prop: 'roadName',
                    'show-overflow-tooltip': true,
                    'min-width': 120
                }
            },
            {
                slot: 'direction',
                attrs: {
                    label: '方向',
                    'show-overflow-tooltip': true,
                    'min-width': 80
                }
            },
            {
                slot: 'level',
                attrs: {
                    label: '事件等级',
                    'show-overflow-tooltip': true,
                    'min-width': 100
                }
            },
            {
                slot: 'fire',
                attrs: {
                    label: '起火',
                    'show-overflow-tooltip': true,
                    width: 100
                }
            },
            {
                slot: 'explosion',
                attrs: {
                    label: '爆炸',
                    'show-overflow-tooltip': true,
                    width: 100
                }
            },
            {
                slot: 'pollutant',
                attrs: {
                    label: '污染物',
                    'show-overflow-tooltip': true,
                    width: 100
                }
            },
            {
                slot: 'fallOut',
                attrs: {
                    label: '散落物',
                    'show-overflow-tooltip': true,
                    width: 100
                }
            },
            {
                slot: 'roadCompensation',
                attrs: {
                    label: '是否赔偿',
                    'show-overflow-tooltip': true,
                    width: 100
                }
            },
            {
                slot: 'action',
                attrs: {
                    label: '操作',
                    fixed: 'right',
                    'min-width': 120
                }
            }
        ]
        return {
            Directions,
            EventTypes,
            EventLevel,
            IsFire,
            IsExplode,
            IsContaminantDAO,
            IsScattered,
            IsIndemnify,
            columns
        }
    },
    methods: {
        handleEdit(row) {
            this.$emit('edit', row)
        },
        handleDelete(id) {
            this.$emit('delete', id)
        },
        handleClickNumber(row) {
            this.$emit('click-number', row)
        }
    }
}
</script>
